<template>
    <div>

            <h2>推荐信息<div class='borbred'>   </div></h2>

        <ul>
            <li class="width700 re1por" >
               <a href="https://consumer.huawei.com/cn/phones/mate40-pro/?ic_medium=hwdc&ic_source=corp_boxrow1left_mate40pro">
                <img src="//www-file.huawei.com/-/media/corp2020/home/cbg/0105/mate40-pro-p.jpg" alt="">
                <div class="re1poa">
                     <p>产品</p> 
                    <h3>HUAWEI Mate Pro</h3>
                    <p class="re1poads">了解更多></p>
                </div>
                </a>
            </li>
             <li class='re2por' >
                 <a href="https://consumer.huawei.com/cn/headphones/freebuds-pro/?ic_medium=hwdc&ic_source=corp_boxrow1right_freebudspro">
                <img src="//www-file.huawei.com/-/media/corp2020/home/cbg/0105/freebuds-pro-p.jpg" alt="">
                 <div class="re1poa">
                     <p>产品</p> 
                    <h3> FreeBuds Pro 无线耳机</h3>
                    <p class="re1poads">了解更多></p>
                </div>
                </a>
            </li>
             <li  class='re2por' >
                 <a href="https://consumer.huawei.com/cn/phones/nova8-pro/?ic_medium=hwdc&ic_source=corp_boxrow2left_nova8pro">

                <img src="//www-file.huawei.com/-/media/corp2020/home/cbg/0105/huawei-nova8-pro-p.jpg" alt="">
                 <div class="re1poa">
                     <p>产品</p> 
                    <h3>HUAWEI nova8 Pro</h3>
                    <p class="re1poads">了解更多></p>
                </div>
                </a>

            </li>

             <li  class="width700 re1por" >
                 <a href="https://www.huawei.com/cn/cases/henan-unicom-icooling?ic_medium=hwdc&ic_source=corp_boxrow3right_henanunicom">

                <img src="//www-file.huawei.com/-/media/corp2020/home/cbg/0105/spro-p.jpg" alt="">
                 <div class="re1poa">
                     <p>产品</p> 
                    <h3>华为智能屏 S Pro</h3>
                    <p class="re1poads">了解更多></p>
                </div>
                </a>

            </li>
            <li class="height300" >
                 <a href="https://consumer.huawei.com/cn/visions/s-pro/?ic_medium=hwdc&ic_source=corp_boxrow2right_s_pro">

                <img src="//www-file.huawei.com/-/media/corp2020/home/box/2/huyanglin.jpg" alt="">
                <div class="re1poa">
                     <p>公益活动</p> 
                    <h3>我有一片胡杨林</h3>
                    <p class="re1poads">了解更多></p>
                </div>
                </a>

            </li>
             <li  class="height300">
                 <a href="https://consumer.huawei.com/cn/campaign/woyouyipianhuyanglin/?ic_medium=hwdc_ic_source=corp_box_row3_left_huyanglin">

                <img src="//www-file.huawei.com/-/media/corp2020/home/box/2/intelligent-twins.jpg" alt="">
                 <div class="re1poa">
                     <p>智能行</p> 
                    <h3>打造行业智能体,共建全场景智慧</h3>
                    <p class="re1poads">了解更多></p>
                </div>
                </a>

            </li>
            <li  class="height300" >
                 <a href="https://intelligent-twins.huaweicloud.com/?ic_medium=hwdc&ic_source=corp_boxrow3cener_intelligenttwins">

                <img src="//www-file.huawei.com/-/media/corp2020/home/box/2/henan-unicom2.jpg" alt="">
                 <div class="re1poa">
                     <p>绿色环保故事</p> 
                    <h3>Al制冷,守卫绿色未来</h3>
                    <p class="re1poads">了解更多></p>
                </div>
                </a>

            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'recommend',
    data() {
        return {

        };
    },
    created() {
    },
    methods: {
      
    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
h2{
    text-align: center;
    margin: 30px 0;
    position: relative;
    .borbred{
        width: 60px;
        position: absolute;
        bottom: -4px;
        left: 820px;
        height: 1px;
        background-color: red;
    }
}
ul{
    padding-bottom: 50px;
    display: flex;
    width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    a{
        color: #fff;
    }
    li{
        width: 360px;
        height: 360px;
        margin-top: 10px;
        position: relative;
        img{
            width: 100%;
            height: 100%;
               transition: all 0.5s;

        }

    }
    .width700{
            width: 720px;
    }
    .height300{
        height:300px;
    }
    .re1por,.re2por,.height300{
        position: relative;
         overflow: hidden;
        color: #fff;
         .re1poa{
             font-size: 20px;
            position: absolute;
            left: 25px;
            top: 255px;
            transition:all 0.5s;
            .re1poads{
                transition:all 0.5s;
                left: 0px;
                top: 110px;
                position: absolute;
            }
        }
    }
    .height300{
        .re1poa{
            top: 225px;
        }
    }
    .re1por:hover{
            z-index: 333;
            
            img{
               vertical-align: middie;
               transform:scale(1.2);
               overflow: hidden;
               transition: all 0.5s;
            }
         .re1poa{
             font-size: 20px;
            position: absolute;
            transition:all 0.5s;
            left: 25px;
            top: 205px;
            .re1poads{
                left: 0px;
                top: 60px;
                position: absolute;
                color: red;
            }
        }
    }
   .re2por:hover{
             width: 32.7%;
             height:360px;
            background-color: red;
              img{
               vertical-align: middie;
               transform:scale(1.2);
               overflow: hidden;
               transition: all 0.5s;
            }
         .re1poa{
             font-size: 20px;
            position: absolute;
            transition:all 0.5s;
            left: 25px;
            top: 205px;
            .re1poads{
                left: 0px;
                top: 60px;
                position: absolute;
                color: red;
            }
        }
    }
    .height300:hover{
          width: 32.7%;
             height:300px;
            background-color: red;
              img{
               vertical-align: middie;
               transform:scale(1.2);
               overflow: hidden;
               transition: all 0.5s;
            }
         .re1poa{
             font-size: 20px;
            position: absolute;
            transition:all 0.5s;
            left: 25px;
            top: 165px;
            .re1poads{
                left: 0px;
                top: 60px;
                position: absolute;
                color: red;
            }
        }
    }
}
</style>
